@import "./_terminal.css";

aside {
    display: flex;
    grid-column: 1 / -1;
    overflow: hidden;
}

pre {
    font-family: emoji, mahjong, 'Source Code Pro', monospace;
    line-height: 1.2;
    overflow: auto hidden;
}

.qr-span span {
    color: var(--grey);
    font-family: emoji, mahjong, 'Source Code Pro', monospace;
}

aside > div {
    background: var(--background);
    border: 1px solid var(--color);
    border-left: 0;
    flex: 1;
    font-family: emoji, mahjong, 'Source Code Pro', monospace;
    font-variant-ligatures: none;
    height: 8.75rem;
    line-height: 1;
    overflow: auto;
    padding: .375rem;
}

aside > h3 {
    color: var(--background);
    background: var(--color);
    line-height: 2rem;
    padding: .5rem 0;
    writing-mode: sideways-lr;
}

canvas {
    border: 1px solid var(--color);
    image-rendering: crisp-edges;
    width: 50%;
}

main .info {
    display: block;
    margin: 0;
    padding: .5rem;
}

#editor-and-rankings {
    display: flex;
    gap: 1rem;
    height: 20rem;

    > div {
        display: flex;
        flex-direction: column;
        overflow: auto;

        > div {
            border: 1px solid var(--color);
            border-top-width: 2px;
            flex: 1;
            overflow: auto;
        }

        > header {
            align-items: center;
            display: flex;
            justify-content: space-between;
            padding-right: .5rem;
        }
    }

    #editor { flex: 1 }

    #rankings {
        width: 17rem;

        > div { border-bottom: 0 }
    }
}

.cm-editor input {
    color: inherit;
    font: inherit;
}

.text-red { color: var(--red-text) }

#err div, #exp div, #out div { white-space: pre }

#arg div {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

#arg span {
    background: var(--arg-background);
    border-radius: .5rem;
    font-family: emoji, mahjong, 'Source Code Pro', monospace;
    padding: .25rem .375rem;
    white-space: pre;
}

#arrows code { font-size: 1.5rem }
#arrows td   { font-family: emoji, mahjong, 'Source Code Pro', monospace }
#arrows td:last-child  { width: 100% }

#authors-btn {
    align-items: center;
    background: 0;
    border: 0;
    display: flex;
    padding: 0;
}

#authors-btn img {
    background: var(--background);
    border-radius: 50%;
    box-sizing: content-box;
    height: 1.75rem;
    width: 1.75rem;
}

#authors-btn img:not(:first-child) {
    border: .25rem solid var(--background);
    margin-left: -.75rem;
}

[data-copy] {
    display: inline;

    + span {
        opacity: 0;
        transition: all 2s;
    }

    &:active + span {
        opacity: 1;
        padding-left: 1rem;
        transition: all 0s;
    }
}

#diff:not(:empty),
#diff-content {
    padding: 0;
}

#diff table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

#diff th {
    color: var(--background);
    background: var(--color);
    font-size: 1.25rem;
}

#diff td, #diff th { line-height: 1.25rem }

#diff td {
    border: none;
    vertical-align: top;
    white-space: pre-wrap;
    word-break: break-all;
}

#diff .diff-col-text { padding: 0 4px }

/* Ref .CodeMirror-linenumber and .CodeMirror-gutters */
#diff .diff-left-num,
#diff .diff-right-num {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    white-space: nowrap;
}

#diff td:not(:last-child) { border-right: 1px solid var(--color) }

#diff .diff-removal       { background-color: var(--diff-light-red) }
#diff .diff-addition      { background-color: var(--diff-light-green) }
#diff .diff-char-removal  { background-color: var(--red) }
#diff .diff-char-addition { background-color: var(--green) }
#diff .diff-skip          { background-color: var(--blue) }

#emojify {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}

#emojify div {
    align-items: center;
    background: var(--light-grey);
    border: 1px solid var(--color);
    display: flex;
    justify-content: space-between;
    padding: .25rem .4rem;
}

#info-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    /* Hide container when it doesn't have a direct child that isn't hidden */
    &:not(:has(> :not(.hide))) { display: none }
}

#rankingsView {
    background: var(--color);
    border: 1px solid var(--color);
    gap: 1px;
}

#rankingsView a {
    align-items: center;
    background: var(--light-grey);
    display: flex;
    flex: 1;
    gap: .5rem;
    justify-content: center;
}

#rankingsView svg {
    height: 1rem;
    width: 1rem;
}

#run {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

#run span {
    flex: 1;
    text-align: right;
}

#scores { border: 0 }

/* Shrink the padding compared to a normal table */
#scores td               { padding: 0 .25rem }
#scores td:first-child { padding-left: .5rem }
#scores td:last-child { padding-right: .5rem }

#scores td:nth-child(n+3) { text-align: right }

#scores .bytes td:nth-child(4),
#scores .chars td:nth-child(3) { color: var(--grey) }

#scores td {
    border-left: 0;
    border-right: 0;
}

#status {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto;
    padding: 1rem;
}

#strokes {
    font-weight: bold;
    padding: .375rem 0;
}

/* TODO Generalise the hole mapping table CSS, lose the specific IDs. */
                            .tables-4col { columns: 4 }
@media (max-width: 54rem) { .tables-4col { columns: 2 } }
@media (max-width: 30rem) { .tables-4col { columns: 1 } }

#colors svg {
    align-self: center;
    border: 1px solid var(--color);
    height: 1rem;
    margin-right: .5rem;
    width: 1rem;
}

.tables-4col table { break-inside: avoid-column }
thead { user-select: none }

#colors td:first-child { display: flex }

#colors td:last-child {
    text-align-last: justify;
    text-justify: inter-character;
}

#colors th:first-child,
#morse  td:last-child,
#states td:first-child {
    width: 100%;
}

@media (max-width: 34rem) { #thirdParty:empty { display: none } }

.run-result-btn {
    border: none;
    background: none;
    padding: 0;
    margin-inline: 2px;
}

.run-result-btn:is(
    :is(:hover, :active, :focus):not([disabled]),
    [disabled]:not(:only-child)
) {
    border-bottom: 2px solid var(--color);
    margin-bottom: -2px;
}

h2 {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

#picker, #solutionPicker {
    gap: .25rem;

    > a:not([href]), select.selectActive { border-color: var(--color) }

    > a {
        align-items: center;
        border: 1px solid var(--grey);
        border-radius: .25rem;
        display: flex;
        gap: .5rem;
        height: 2.375rem;
        padding: .375rem .5rem;

        svg {
            height: 1rem;
            width: 1rem;
        }
    }
}

#runtime {
    font-size: 80%;
    text-align: center;
    font-weight: normal;
    padding-bottom: 0.1rem;
}

.cm-highlightSpace, .cm-highlightTab { opacity: 0 }

.show-whitespace :is(.cm-highlightSpace, .cm-highlightTab) { opacity: .5 }

.cm-highlightSpace {
    /* The default whitespace circle is too big.
       The built in styling has a higher specificity, since it also uses an internal class `.ͼ1`. */
    background-image: radial-gradient(circle 0.5rem at 50% 55%, #aaa 20%, transparent 5%) !important;
}

#diffKindSettings {
    margin: 0.5rem;
}
#diffKindSettings label {
    margin: 0.5rem;
}

#itemsDiff td div {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: 0.25rem;
}

#itemsDiff span {
    border-radius: .5rem;
    font-family: emoji, mahjong, 'Source Code Pro', monospace;
    padding: .25rem .375rem;
    white-space: pre;
}

#itemsDiff .neg span{
    background: var(--red);
}
#itemsDiff .pos span{
    background: var(--green);
}

:has(#diffKindSettings input[value="items"]:checked) #linesDiff {
    display: none;
}

:has(#diffKindSettings input[value="items"]:not(:checked)) #itemsDiff {
    display: none;
}

.pass.lastSubmittedCode .cm-editor { border-color: var(--green) !important }
.fail.lastSubmittedCode .cm-editor { border-color: var(--red)   !important }
